<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.8.1.js"></script>
<link href="/springnewfeatures/resources/table.css" rel="stylesheet"
	type="text/css" media="all" />

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery.ajax({
			url : 'bookjson',
			type : 'get',
			dataType : 'json',
			success : function(book) {
				var table = document.getElementById("tbody");
				var size = table.rows.length;

				for ( var i = 0; i < size; i++) {
					table.deleteRow(1);
				}

				for ( var i = 0; i < book.length; i++) {
					var newRow = table.insertRow(i);
					var newcell1 = newRow.insertCell(0);
					newcell1.innerHTML = book[i].isbn;
					var newcell2 = newRow.insertCell(1);
					newcell2.innerHTML = book[i].title;
				}
			}
		});

		function Book(isbn, title) {
			this.isbn = isbn;
			this.title = title;
		}

		jQuery('#form').submit(function() {
			var book = new Book(jQuery('#isbn').val(), jQuery('#title').val());
			jQuery.ajax({
				type : 'POST',
				url : 'bookjson/register',
				data : JSON.stringify(book),
				dataType : "json",
				contentType : "application/json",
				success : function(book) {
					console.log(book);
				
					var table = document.getElementById("tbody");

					var newRow = table.insertRow(table.rows.length);
					var newcell1 = newRow.insertCell(0);
					newcell1.innerHTML = book.isbn;
					var newcell2 = newRow.insertCell(1);
					newcell2.innerHTML = book.title;
				}
			});
			return false;
		});
	});
</script>
<title>책 정보</title>

</head>
<body>

	<form id="form">
		<div class="form">
			<div class="isbndiv">
				<div class="isbnLabel">ISBN</div>
				<span class="uisbn"><input type="text" name="isbn" id="isbn"></span>
			</div>
			<div class="titlediv">
				<div class="titleLabel">Title</div>
				<span class="utitle"><input type="text" name="title" id="title"></span>
			</div>
			<div class="btnClass">
				<button type="submit" id="btn-primary" class="btn btn-primary">추가</button>
			</div>
		</div>
	</form>

	<table id="table">
		<thead>
			<tr>
				<th>INBN</th>
				<th>Title</th>
			</tr>
		</thead>
		<tbody id="tbody">
		</tbody>
	</table>
</body>
</html>